$(function () {

    //风等级颜色
    var windColor = ['1', '2', '3', '#2f9a00', '5', '#d2fe09', '#fcfe00', '#f3d42f', '#fb9b03', '10', '11', '12'];
    var points = [{lng: 120.55, lat: 27.57}, {lng: 120.68, lat: 27.63}, {lng: 120.73, lat: 27.71}, {
        lng: 120.59,
        lat: 28.04
    }, {lng: 121.04, lat: 27.99}, {lng: 121.07, lat: 28.14}, {lng: 121.12, lat: 27.89}]
    //console.log(map.getPixelFromLonLat(new QXMap.Point(122, 31)))
    var map = QXMap.Map('mapContainer', {
        zoom: 10,
        center: [120.8, 27.952],
        maptype: QMAP_NORMAL_MAP
    });
    map.addControl(new QXMap.MapTypeControl("maptypeControl", {
        position: "topright"
    }));
    map.addControl(new QXMap.LatlngControl("lnglatInfoControl", {
        position: "bottomright"
    }));
    // 二级菜单切换
    $("#nav").on("click", 'li', function () {
        if($(this).hasClass("active"))return;
        var index = $(this).index();
        $(this).addClass("active").siblings(".active").removeClass("active");
        if (index === 0) {
            windfore()
            $(".force-rain,.selectList").addClass('hide')
        } else if (index === 1) {
            $(".warningWether").addClass("hide")
            $(".force-rain,.selectList").removeClass('hide')
            forcastRain('/wzdisplay/file/precipitation1/imgNames', "1小时雷达降雨预报", "/wzdisplay/file/precipitation1/img?imgName=")
        } else if (index === 2) {
            $(".warningWether").addClass("hide")
            $(".force-rain,.selectList").removeClass('hide')
            forcastRain("/wzdisplay/file/precipitation3/imgNames", "3小时雷达降雨预报", "/wzdisplay/file/precipitation3/img?imgName=")
        }
    })
    //选择显示信息
    $(".channel").on("click", "li", function () {
        var index = $(this).index();
        // if(index==0){
        //   if($(this).html()=="显示站点"){
        //     $("svg").find('.pointg').removeClass("hide")
        //     $(".pointdiv").removeClass("hide")
        //     console.log($('svg g').hasClass("pointg"))
        //     if($('svg g').hasClass("pointg"))$(this).html("隐藏站点")

        //   }else{
        //     $("svg").find('.pointg').addClass("hide")
        //     $(".pointdiv").addClass("hide")
        //     $(this).html("显示站点")
        //   }
        // }
        if (index === 0) {
            if ($(this).html() == "显示航道") {
                $("svg").find('.polyline').removeClass("hide")
                $(".polyline-text").removeClass("hide")
                // $(".pointdiv").removeClass("hide")
                $(this).html("隐藏航道")
            } else {
                $("svg").find('.polyline').addClass("hide")
                $(".polyline-text").addClass("hide")
                // $(".pointdiv").addClass("hide")
                $(this).html("显示航道")
            }
        } else {
            if ($(this).html() == "隐藏港区") {
                $(".polygon,.polygon-text").addClass("hide")
                // $(".polygon-text").addClass("hide")
                // $(".pointdiv").removeClass("hide")
                $(this).html("显示港区")
            } else {
                $(".polygon,.polygon-text").removeClass("hide")
                // $(".polygon-text").removeClass("hide")
                // $(".pointdiv").addClass("hide")
                $(this).html("隐藏港区")
            }
        }
    })
    //draw();
    //drawchannel()
    //绘制港区 
    function draw() {
        var polygonOptions =
            {
                color: '#0033ff',
                weight: 3,
                fillColor: '#83AEFF',
                opacity: .3,
                fillopacity: 0,
                isfill: true
            }
        var changNan = {
            name: "苍南港区",
            center: {lng: 120.662, lat: 27.503},
            points: "120.645762,27.491951,120.649499,27.498617,120.666747,27.497079,120.68112,27.492977,120.684282,27.501949,120.664447,27.507589,120.64835,27.506307,120.642313,27.499642"
        }

        var pingyang = {
            name: "平阳港区",
            center: {lng: 120.611, lat: 27.596},
            points: "120.600919,27.602132,120.60135,27.591759,120.618454,27.582026,120.622047,27.59765"
        }

        var rui = {
            name: "瑞安港区",
            center: {lng: 120.665, lat: 27.736},
            points: "120.624419,27.758819,120.68651,27.702031,120.704619,27.72301,120.645116,27.769559"
        }
        var jiang = {
            name: "瓯江港区",
            center: {lng: 120.886, lat: 27.987},
            points: "120.77,27.98,120.90,28.01,121.00,27.93,120.85,27.97"
        }
        var daxiao = {
            name: "大小门岛港区",
            center: {lng: 121.080, lat: 27.977},
            points: "121.053306,27.951214,121.048706,27.991029,121.082472,28.017414,121.09742,28.008229,121.086651,27.985415,121.160085,27.964336,121.156061,27.956679,121.101599,27.945597"
        }
        var leqing = {
            name: "乐清湾港区",
            center: {lng: 121.012, lat: 28.149},
            points: "120.95,27.98,121.07,28.13,121.13,28.26,120.97,28.15"
        }
        var zhuangy = {
            name: "状元岙港区",
            center: {lng: 121.096, lat: 27.882},
            points: "121.044107,27.881756,121.16139,27.910362,121.133794,27.879202,121.074578,27.849055"
        }
        drawpolygon(changNan, polygonOptions)
        drawpolygon(pingyang, polygonOptions)
        drawpolygon(rui, polygonOptions)
        drawpolygon(jiang, polygonOptions)
        drawpolygon(daxiao, polygonOptions)
        drawpolygon(leqing, polygonOptions)
        drawpolygon(zhuangy, polygonOptions)
    }

    //绘制多边形
    function drawpolygon(str, polygonOptions) {
        var arr = str.points.split(",");
        var psts = [];
        for (var i = 0; i < arr.length; i++) {
            if (i % 2 == 0) {
                psts.push({lng: arr[i], lat: arr[i + 1]})
            }
        }
        var polyline = QXMap.Polygon(psts, polygonOptions, function () {
            console.log("1")
        });
        map.addVectorLayer(polyline)
        $(polyline._container).addClass("polygon");
        //绘制多边形中心点
        var markOptions =
            {
                showlabel: true,
                radius: 3,
                direction: "right",
                color: 'red',
                content: str.name,
                fillColor: 'red',
                textColor: "red"
            }
        mark = QXMap.CircleMarker(str.center, markOptions, function () {
            // $(".polygon-point").unbind()
        });
        map.addMarkerLayer(mark)

        $(mark._container).addClass("polygon")
        $(mark.label._container).addClass("polygon-text");
    }

    //绘制航线
    function drawchannel() {
        var luxiToDamen = {
            name: "鹿西岛至大门岛",
            center: {lng: 121.162, lat: 28.00},
            points: [{lng: 121.226145, lat: 27.990442}, {lng: 121.10285, lat: 27.987799}]
        }

        var luxiToDongtou = {
            name: "鹿西岛至洞头本岛",
            center: {lng: 121.192, lat: 27.907},
            points: [{lng: 121.226145, lat: 27.990442}, {lng: 121.170905, lat: 27.823867}]
        }

        var ruianToBeidao = {
            name: "瑞安至北麂岛",
            center: {lng: 120.950, lat: 27.690},
            points: [{lng: 120.655545, lat: 27.750708}, {lng: 121.216657, lat: 27.631206}]
        }

        var ruianToNandao = {
            name: "瑞安至南麂岛",
            center: {lng: 120.838, lat: 27.639},
            points: [{lng: 120.655545, lat: 27.750708}, {lng: 121.084864, lat: 27.471669}]
        }

        var aoToNandao = {
            name: "鳌江至南麂岛",
            center: {lng: 120.799, lat: 27.537},
            points: [{lng: 120.564605, lat: 27.590765}, {lng: 121.084864, lat: 27.471669}]
        }
        addPolyline(luxiToDamen, "green", .8)
        addPolyline(luxiToDongtou, "green", .8)
        addPolyline(ruianToBeidao, "green", .8)
        addPolyline(ruianToNandao, "green", .8)
        addPolyline(aoToNandao, "green", .8)
    }

    //地图多线段封装
    //points点的集合，fillColor线的颜色
    function addPolyline(points, fillColor, opacity) {
        var polylineOptions =
            {
                color: fillColor,
                weight: 10,
                fillColor: fillColor,
                opacity: opacity,
                fillopacity: 0.8,
                isfill: true
            }
        var polyline = QXMap.PolyLine(points.points, polylineOptions, function () {

        });
        map.addMarkerLayer(polyline);
        $(polyline._container).addClass("polyline hide");
        //绘制航道中心点
        var markOptions =
            {
                showlabel: true,
                radius: 3,
                direction: "right",
                color: 'red',
                content: points.name,
                fillColor: 'red'
            }
        mark = QXMap.CircleMarker(points.center, markOptions, function () {
        });
        map.addMarkerLayer(mark)
        $(mark.label._container).addClass("polyline-text hide");
        $(mark._container).addClass("polyline-text hide");
        console.log()
    };
    //能见度预报
    function strongeWeather(str) {
        // var str="K0579\\-999\\<118.76,29.68>(118.62,29.64)(118.59,29.61)(118.55,29.57)";
        var code = str.slice(0, str.indexOf('\\'));
        var invalid = str.slice(str.indexOf('\\') + 1, str.lastIndexOf('\\'))
        var current = str.slice(str.indexOf('<'), str.indexOf('(')).split(/\<|\>/)
        var passpaths = str.slice(str.lastIndexOf('>') + 1, str.indexOf('[')).split(/\(|\)/);
        var forecastpaths = str.slice(str.lastIndexOf(")") + 1, str.lastIndexOf(']') + 1).split(/\[|]/)
        var passarr = pushArr(passpaths)
        var currentarr = pushArr(current)
        var forearr = pushArr(forecastpaths)
        passPath(passarr, code)
        currentPath(passarr[0], currentarr, code)
        forePath(forearr, currentarr[currentarr.length - 1])
    }

    function passPath(pas, code) {

        if (pas.length > 0) {
            strongeWind(pas, 'blue', .8, "5,5")
            strongeSation(pas[pas.length - 1], code, 'green', '')
            for (var i = 0; i < pas.length - 1; i++) {
                strongeSation(pas[i], "", 'green', '')
            }
        }

    }

    function currentPath(pas, cur, code) {
        if (pas) {
            strongeSation(cur[0], "", 'red', 'flash')
            map.setCenter(cur[0])
            cur.unshift(pas)
            strongeWind(cur, 'blue', .7, '5.5')
        } else {
            strongeSation(cur[0], "" + code, 'red', ' flash')
            map.setCenter(cur[0])
        }

    }

    function forePath(pas, cur) {
        if (pas.length > 0) {
            pas.forEach(function (val) {
                //var arr=[cur,val]
                //strongeWind(arr,'blue',.8)
                strongeSation(val, "", 'yellow', '')
                //console.log(arr)

            })
            pas.unshift(cur)
            strongeWind(pas, 'blue', .8)
        }
    }

    function strongeWind(points, fillColor, opacity, stroke) {
        var polylineOptions =
            {
                color: fillColor,
                weight: 3,
                fillColor: fillColor,
                opacity: opacity,
                fillopacity: 0.8,
                isfill: false
            }
        var polyline = QXMap.PolyLine(points, polylineOptions, function () {

        });
        map.addMarkerLayer(polyline);
        $(polyline._container).addClass("animated infinite").attr("stroke-dasharray", stroke)

        // $(polyline._container).addClass("polyline hide");

    }

    function strongeSation(point, name, color, animate) {
        var markOptions =
            {
                showlabel: true,
                radius: 5,
                direction: "right",
                color: color,
                content: name,
                fillColor: 'red'
            }
        mark = QXMap.CircleMarker(point, markOptions, function () {
        });

        map.addMarkerLayer(mark)

        $(mark._container).addClass("animated infinite " + animate + "")
        $(mark.label._container).addClass("polyline-wind");
    }

    //降雨估测
    function forcastRain(url, txt, urlimg) {
        $.ajax({
            type: 'get',
            url: url,
            success: function (data) {
                for (var i = data.length - 1, j = 0, html = ''; i >= 0, j < data.length; i--, j++) {
                    html += '<li i="'+data[i]+'" >'+j + "时发布"+'</li>'
                }
                $(".selectList ul").html(html)
                $(".selectList p span").html(txt)
                selectImg(urlimg)
            }
        })
    }

    function selectImg(urlimg) {
        var h = $('.selectList ul li').eq(0).attr("i")
        $(".force-rain").html('<img height="100%" src="'+urlimg + h+'">')
        $(".selectList").mouseenter(function () {
            $(this).find(".rain-cn").removeClass("hide")
        })
        $(".selectList").on("click", "li", function () {
            var times = $(this).attr("i")
            $(".selectList p span").html($(this).html())
            $(this).parent().parent().addClass("hide")
            $(".force-rain").html('<img height="100%" src="'+urlimg + times+'">')

        })
    }

    function pushArr(res) {
        var arr = []
        res.forEach(function (val) {
            if (val) {
                var ar = val.split(",")
                arr.push({lng: ar[0], lat: ar[1]})
            }
        })
        return arr;
    }
    function windfore() {
        $.ajax({
            type: 'get',
            url: "/wzdisplay/file/storm",
            success: function (data) {
                if (data.message == "No storm cells") {
                    $(".warningwind").removeClass("hide")
                } else {
                    var arrMesg=[]
                    var ar=data.message.split(/[a-zA-Z]/)
                    ar.shift()
                    var arr=data.message.match(/[a-zA-Z]/ig)
                    for(var i=0;i<arr.length;i++){
                        arrMesg.push(arr[i]+ar[i])
                    }
                    $(".warningwind").addClass("hide")
                    arrMesg.forEach(function(val){
                        strongeWeather(val)
                    })
                }
            }
        })
    }

    windfore()


})